<template>
  <div class="editGroup app-container">
    <div>
      <el-button @click="back">{{ $t("editGroup.returnList") }}</el-button>
      <el-button type="primary" @click="save">{{
        $t("editGroup.save")
      }}</el-button>
    </div>
    <div class="content">
      <el-transfer
        v-model="value"
        :data="tableData"
        :props="{
          key: 'id',
          label: 'name',
        }"
        :titles="[$t('editGroup.noin'), $t('editGroup.in')]"
        :button-texts="[$t('editGroup.MoveIn'), $t('editGroup.MoveIn')]"
      />
    </div>
  </div>
</template>
<script>
import {
  getCommodityList,
  getCommodityById,
  setCommodityGroup,
} from "@/api/commodity";
import { getProductGroupById, addGroup } from "@/api/productGroup";

export default {
  data() {
    return {
      value: [],
      tableData: [],
      id: null,
      form: {},
    };
  },
  created() {
    this.id = this.$route.query.id;
    this.init();
  },
  methods: {
    back() {
      // 关闭当前路由，返回上级路由
      // this.$store.state.tagsView.visitedViews.splice(
      //   this.$store.state.tagsView.visitedViews.findIndex(
      //     (item) => item.path === this.$route.path
      //   ),
      //   1
      // )
      this.$router.push("/commodityManagement/group");
    },
    async save() {
      const products = [];
      this.tableData.forEach((item) => {
        if (this.value.includes(item.id)) {
          products.push(item);
        }
      });
      this.form.products = products;
      this.form.quantity = this.value;
      this.value.map(async (item) => {
        getCommodityById({ id: item }).then(async (res) => {
          if (!res.data.groupId.includes(this.id)) {
            res.data.groupId.push(this.id);
          }
          await setCommodityGroup({ newCommodity: res.data });
        });
      });

      this.changeProduct();
      await addGroup(this.form);
      this.$message({
        message: this.$t("publicTxts.success"),
        type: "success",
      });
      this.back();
    },
    // 左边框过滤
    async changeProduct() {
      let leftArr = this.tableData.filter(
        (item) => !this.value.includes(item.id)
      );
      leftArr = leftArr.map((item) => item.id);
      leftArr.map(async (item) => {
        getCommodityById({ id: item }).then(async (res) => {
          res.data.groupId = res.data.groupId.filter(
            (child) => child != this.id
          );
          await setCommodityGroup({ newCommodity: res.data });
        });
      });
    },
    async init() {
      const res = await getCommodityList({
        page: 1,
        limit: 9999,
        name: "",
        type: "",
        groupId: "",
        status: "",
      });
      this.tableData = res.data;
      const resId = await getProductGroupById({ id: this.id });
      this.form = resId.data;
      console.log(this.form);
      this.value = this.form.quantity;
    },
  },
};
</script>
<style lang="scss">
.editGroup {
  width: 100%;
  height: 100%;
  .content {
    margin: 32px 0;
    .el-transfer {
      width: 1000px;
      .el-transfer-panel__list {
        height: 358px !important;
      }
      .el-transfer-panel {
        height: 400px;
        width: 300px;
      }
    }
  }
}
</style>
